<template>
  <a-form
      layout="vertical"
      :model="activeData.props"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
  >
    <a-form-item
        label="标题内容"
        name="text"
        :rules="[{ required: true, message: '请输入标题内容' }]"
    >
      <a-input v-model:value="activeData.props.text" :disabled="activeData.isLocked"/>
    </a-form-item>
    <a-form-item
        label="层级"
        name="level"
    >
      <a-select
          ref="select"
          :disabled="activeData.isLocked"
          v-model:value="activeData.props.level"
          class="text-left"
          @change="handleChange"
      >
        <a-select-option :value="1">1</a-select-option>
        <a-select-option :value="2">2</a-select-option>
        <a-select-option :value="3">3</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
        name="isCenter"
    >
      <a-checkbox :disabled="activeData.isLocked" v-model:checked="activeData.props.isCenter">居中显示</a-checkbox>
    </a-form-item>
  </a-form>
</template>
<script setup>
import useQuestion from "../../hooks/useQuestion.js";

const {activeData} = useQuestion()
const onFinish = (values) => {
  console.log('Success:', values);
};
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
</script>
<style scoped>
:deep(.ant-form-item-control-input-content), :deep(.ant-space-item) {
  display: flex;
  justify-content: flex-start;
}

</style>
